<template>
  <div class="user">
    <el-card>
      <el-form :inline="true" :model="form" ref="form">
        <el-form-item prop="username" label="用户名称">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="email" label="用户邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item prop="role_id" label="角色">
          <el-select v-model="form.role_id" placeholder="请选择">
            <el-option label="超级管理员" value="1"></el-option>
            <el-option label="管理员" value="2"></el-option>
            <el-option label="老师" value="3"></el-option>
            <el-option label="学生" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchEvent">查询</el-button>
          <el-button @click="removeEvent">清除</el-button>
          <el-button type="primary" @click="addEvent">+新增用户</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="infoData" style="width: 100%">
        <el-table-column prop="length" label="序号" width="50px">
          <template v-slot="{ $index }">
            <div>
              {{ (page.page - 1) * page.limit + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="phone" label="电话"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <!-- 角色转换 -->
        <el-table-column prop="role_id" label="角色"> </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template v-slot="{ row }">
            <div :class="{ red: row.status == 0 }">
              {{ row.status == '0' ? '禁用' : '启用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div>
              <el-button type="text" @click="edit(row)">编辑</el-button>
              <el-button type="text" @click="setStatus(row.id)">
                {{ row.status == '0' ? '启用' : '禁用' }}
              </el-button>
              <el-button type="text" @click="delEvent(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page="page.page"
          :page-sizes="[1, 10, 20, 30, 40]"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next,jumper"
          :total="page.total"
        />
      </div>
    </el-card>
    <Add ref="add" v-model="show" @getData="getData" :nameData="nameData" />
  </div>
</template>

<script>
import Add from './components/add.vue'
import roleData from '@/api/constant/user.js'
import { userList, userStatus, userRemove } from '@/api/user.js'
export default {
  components: {
    Add
  },
  data () {
    return {
      roleData,
      nameData: [],
      form: {
        username: '',
        email: '',
        role_id: ''
      },
      infoData: [{}],
      page: {
        total: 1, // 总条数
        page: 1, // 页码
        limit: 1 // 页容量
      },
      show: false,
      role_id: ''
    }
  },
  async created () {
    this.getData()
  },
  methods: {
    // 页容量改变
    sizeChange (size) {
      this.page.limit = size
      // console.log(this.page.size)
      this.getData()
    },
    pageChange (page) {
      this.page.page = page
      this.getData()
    },
    // 获取数据 渲染页面
    async getData () {
      const data = { ...this.form, ...this.page }
      const res = await userList(data)
      // console.log('获取到的用户信息', res)
      // 在拿到数据之前就转换角色  res里有role_id
      res.data.data.items.forEach((item) => {
        // console.log(item)
        const result = roleData.role_id.find((item2) => {
          return item2.id === item.role_id
        })
        // console.log(result)
        item.role_id = result.value
        // console.log(result[value])
      })
      this.infoData = res.data.data.items
      this.page.total = res.data.data.pagination.total
      // console.log('用户信息', this.infoData)
      // 获取所有的username
      this.infoData.forEach((item) => {
        this.nameData.push(item.username)
      })
      // console.log('用户名数组', this.nameData)
    },
    // 设置状态
    setStatus (id) {
      userStatus({ id }).then(() => {
        this.$message.success('设置状态成功')
        this.getData()
      })
    },
    // 查询事件
    searchEvent () {
      this.page.page = 1
      this.getData()
    },
    // 清除事件
    removeEvent () {
      this.$refs.form.resetFields()
      this.searchEvent()
    },
    // 新增事件
    addEvent () {
      this.show = true
      this.$refs.add.mode = 'add'
      this.$refs.add.nameData = this.nameData
    },
    // 编辑事件
    edit (row) {
      this.show = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = row
      this.$refs.add.nameData = this.nameData
    },
    // 删除事件
    delEvent (id) {
      userRemove({ id }).then(() => {
        this.$message.success('删除成功')
        this.getData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  text-align: center;
  padding-top: 15px;
}
.red {
  color: red;
}
</style>
